import React from "react";
import { View, Image } from "react-native";

import { clone } from "solomon-utils-rn";

import styles from "./styles";

import MovableBox from "../../../components/MovableBox";

import img3 from "../../../../assets/images/erha3.jpg";
import img4 from "../../../../assets/images/erha4.jpg";
import img5 from "../../../../assets/images/erha5.png";
import img6 from "../../../../assets/images/erha6.jpg";
import img7 from "../../../../assets/images/erha7.png";
import img8 from "../../../../assets/images/erha8.jpeg";

class Demo3 extends React.Component {
  // componentDidMount() {
  //   this.refContainer.current.measure((x, y, width, height, pageX, pageY) => {
  //     console.log(x, y);
  //   });
  // }

  state = {
    data: [
      {
        id: "001",
        style: {
          top: 0,
          left: 0,
          width: 240,
          height: 240,
          ...styles.imgBorder,
        },
        img: img3,
        disable: true,
      },
      {
        id: "002",
        style: {
          top: 0,
          right: 0,
          width: 110,
          height: 110,
          ...styles.imgBorder,
        },
        img: img4,
      },
      {
        id: "003",
        style: {
          top: 130,
          right: 0,
          width: 110,
          height: 110,
          ...styles.imgBorder,
        },
        img: img5,
      },
      {
        id: "004",
        style: {
          top: 260,
          left: 0,
          width: 110,
          height: 110,
          ...styles.imgBorder,
        },
        img: img6,
      },
      {
        id: "006",
        style: {
          top: 260,
          left: 130,
          width: 110,
          height: 110,
          ...styles.imgBorder,
        },
        img: img7,
      },
      {
        id: "007",
        style: {
          top: 260,
          right: 0,
          width: 110,
          height: 110,
          ...styles.imgBorder,
        },
        img: img8,
      },
    ],
  };

  localOnChangeEnd = info => {
    const { data } = this.state;
    const { id, overlapIds } = info;
    if (overlapIds.length === 1) {
      const currentId = data.findIndex(item => item.id === id);
      const overlapId = data.findIndex(item => item.id === overlapIds[0]);

      const newData = clone(data);
      newData[currentId].img = data[overlapId].img;
      newData[overlapId].img = data[currentId].img;
      this.setState({
        data: newData,
      });
    }
  };

  render() {
    const { data } = this.state;

    return (
      <View style={styles.root}>
        {/* <View
          style={{
            width: 300,
            height: 500,
            borderStyle: "solid",
            borderWidth: 1,
            marginTop: 50,
            overflow: "hidden",
          }}
        > */}
        <MovableBox data={data} interchange onChagneEnd={this.localOnChangeEnd}>
          {data.map(({ id, style, img, disable }) => (
            <MovableBox.Box key={id} id={id} style={style} disable={disable}>
              <Image source={img} style={{ flex: 1, width: "100%" }} />
            </MovableBox.Box>
          ))}
        </MovableBox>
      </View>
      // </View>
    );
  }
}

export default Demo3;
